<template>
  <div class="tabbar">
    <ul>
      <router-link v-for="(item, index) in arr" :key="index" :to="item.src">
        <li>
          <span :class="'iconfont ' + item.icon"></span>
          <p>{{ item.txt }}</p>
        </li>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Tabbar",
  data() {
    return {
      arr: [
        { src: "/home", icon: "icon-04", txt: "首页" },
        { src: "/classification", icon: "icon-fenlei", txt: "分类" },
        { src: "/cart", icon: "icon-gouwuche_o", txt: "购物车" },
        { src: "/my", icon: "icon-shouye", txt: "我的" },
      ],
    };
  },
  methods: {},
};
</script>

<style scoped lang="less">
.tabbar {
  width: 100%;
  height: 0.85rem;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 0.01rem solid #cccccc;
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
      align-items: center;
      text-align: center;
      span {
        font-size: 0.35rem;
        margin-bottom: 0.2rem;
      }
      p {
        font-size: 0.2rem;
        color: #000;
      }
    }
  }
}
.router-link-active {
  color: red;
  p {
    color: red !important;
  }
}
</style>
